<style>

  section#color-selector { 
    aspect: MaterialColorSelector;
    flow:vertical; border-spacing: 10dip; size:210dip *; 
    overflow-y:auto;
  }

  section#color-selector > input#hue
  {
    display:block; 
    border:none;
    height: 3dip;
    width:180dip;
    margin:0 *;
    background: linear-gradient(left, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 67%, #ff00ff 83%, #ff0000 100%);
  }

  section#color-selector > div { size:180dip 36dip; border:1px solid; margin:0 *; }
  
  section#color-selector > .lighten5  { background-color: var(lighten5,#000); }
  section#color-selector > .lighten4  { background-color: var(lighten4,#000); }
  section#color-selector > .lighten3  { background-color: var(lighten3,#000); }
  section#color-selector > .lighten2  { background-color: var(lighten2,#000); }
  section#color-selector > .lighten1  { background-color: var(lighten1,#000); }
  section#color-selector > .normal    { background-color: var(normal,#000); }
  section#color-selector > .darken1   { background-color: var(darken1,#000); }
  section#color-selector > .darken2   { background-color: var(darken2,#000); }
  section#color-selector > .darken3   { background-color: var(darken3,#000); }
  section#color-selector > .darken4   { background-color: var(darken4,#000); }
  section#color-selector > .ascent1   { background-color: var(ascent1,#000); }
  section#color-selector > .ascent2   { background-color: var(ascent2,#000); }
  section#color-selector > .ascent3   { background-color: var(ascent3,#000); }
  section#color-selector > .ascent4   { background-color: var(ascent4,#000); }
    
</style>
<script type="text/tiscript">

  function MaterialColorSelector() {
  
    var body = $(body);
    
    var angle = 0;
    
        // H   S   V
    
   var mt=[[ -9,0.078,1    ],   
           [ -6,0.198,1    ], 
           [  0,0.356,0.937],
           [  0,0.498,0.898],
           [  1,0.665,0.937],
           [  4,0.779,0.957],
           [  1,0.769,0.898],
           [  0,0.777,0.827],
           [  0,0.798,0.776],
           [  0,0.847,0.718],
           [  5,0.498,1    ], 
           [  0,0.678,1    ], 
           [-12,0.91 ,1    ],  
           [  0,1    ,0.835]]; 

    function mtc( n ) {
      var row = mt[n];
      return Color.hsv((360 + angle + row[0]) % 360 ,row[1],row[2]);
    }
    
    function updateVariables() {
      body.style.variables {
        lighten5: mtc(0),
        lighten4: mtc(1),
        lighten3: mtc(2),
        lighten2: mtc(3),
        lighten1: mtc(4),
          normal: mtc(5),
         darken1: mtc(6),  
         darken2: mtc(7),
         darken3: mtc(8),
         darken4: mtc(9),
         ascent1: mtc(10),
         ascent2: mtc(11),
         ascent3: mtc(12),
         ascent4: mtc(13) };
    }
      
    $(input#hue).on("change", function() {
      angle = this.value;
      // defining CSS variables by code:
      updateVariables();
    });
    
    updateVariables();
  }


</script>

<section#color-selector>
  <h2>Material colors</h2>
  <input|hslider#hue min=0 max=360 />
  <div.lighten5>lighten5</div>
  <div.lighten4>lighten4</div>
  <div.lighten3>lighten3</div>
  <div.lighten2>lighten2</div>
  <div.lighten1>lighten1</div>
  <div.normal>normal</div>    
  <div.darken1>darken1</div>  
  <div.darken2>darken2</div>  
  <div.darken3>darken3</div>  
  <div.darken4>darken4</div>  
  <div.ascent1>ascent1</div>  
  <div.ascent2>ascent2</div>  
  <div.ascent3>ascent3</div>  
  <div.ascent4>ascent4</div>  
</section>

